<template>
	<view class="page-container">
		<view class="manage-container">
			<view class="manage-item">
				<view class="clearfix">
					<view class="pull-left font-18 font-weight-bold">{{ cpname }}</view>
					<view v-if="yhqs != 0" class="pull-right">未还清</view>
				</view>
				<view class="clearfix padded-t-5">
					<view class="pull-left">年化利率：{{ nhll }}%</view>
					<view class="pull-right">总期数：{{ hkqs }}期</view>
				</view>
				<view class="clearfix padded-t-10 color-7F7F7F">
					<view class="pull-left">借款类型</view>
					<view class="pull-right">{{ dklx }}</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">借款人</view>
					<view class="pull-right">{{ jkr }}</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">担保人/公司</view>
					<view class="pull-right">{{ dbr }}</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">担保物</view>
					<view class="pull-right">{{ dbw }}</view>
				</view>
				<view v-if="isend == 1" class="product-button margin-t-15" @click="qbhk(id)">
					点击全部还款
				</view>
				<view v-if="isend == 2" class="color-7F7F7F product-button margin-t-15" @click="qbhk(id)">
					全部已还
				</view>
				
			</view>
			
			
			<view v-for="(item, index) in dataArray" :key="index" class="manage-item margin-t-15">
				<view class="clearfix font-weight-bold">
					<view class="pull-left">{{ item.q }}期账单</view>
					<view class="pull-right">{{ item.bq }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">剩余应还</view>
					<view class="pull-right" v-if="item.type == 1">{{ item.bq }} 元</view>
					<view class="pull-right" v-if="item.type == 2">0 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">本金</view>
					<view class="pull-right">{{ item.bj }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">利息</view>
					<view class="pull-right">{{ item.lx }} 元</view>
				</view>
				<hr class="divider margin-t-15">
				<view class="clearfix padded-t-15 color-7F7F7F">
					<view class="pull-left">到期还款日</view>
					<view class="pull-right">{{ item.date }}</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">全部待还</view>
					<view class="pull-right">{{ item.ze }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">剩余期数</view>
					<view class="pull-right">{{ item.yhqs }}/{{ hkqs }} 期</view>
				</view>
				<view v-if="item.type == 1" @click="djhk(item.q)" class="product-button margin-t-15">
					点击还款
				</view>
				
				<view v-if="item.type == 2" @click="djhk(item.q)" class="color-7F7F7F product-button margin-t-15">
					本期已还
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			const id = options.id;
			if (id) {
			    const decodedId = decodeURIComponent(id);
			    if (decodedId) {
					this.id = id;
					this.getbd(id);
			    }
			}
		},
		data() {
			return {
				id: '', 
				
				fkjg:'',
				cpname:'',
				hkqs:'0',
				yhqs:'0',
				nhll:'0',
				benqi:[],
				ze:'0',
				
				dklx: "",
				jkr: "",
				dbr: "",
				dbw: "",
				isend: 1,
				
				dataArray: []
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
			},
			getbd(id) {
				uni.request({
					url: 'https://wn.wdyky.com/index/jrgl/jrcpxq', 
					method: 'GET',
					data: {
						id: id,
					},
					success: (res) => {
						if(res.data.code == 1){ 
							this.dataArray = res.data.data.hkjh.list;
							this.fkjg = res.data.data.fkjg;
							this.cpname = res.data.data.cpname;
							this.nhll = res.data.data.nhll;
							this.hkqs = res.data.data.hkqs;
							this.yhqs = res.data.data.yhqs;
							this.benqi = res.data.data.benqi;
							this.ze = res.data.data.ze;
							
							this.dklx = res.data.data.dklxs;
							this.jkr = res.data.data.jkr;
							this.dbr = res.data.data.dbr;
							this.dbw = res.data.data.dbw;
							
							this.isend = res.data.data.isend;
	
						}
						console.log('GET请求成功：', res.data);
					},
					fail: (err) => {
						console.error('GET请求失败：', err);
					}
				});
			},
			djhk(q){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/qrhk', // 请求地址
				    data: {
				    	id: this.id,
						q: q,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.getbd(this.id);
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			qbhk(id){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/qbhq', // 请求地址
				    data: {
				    	id: this.id,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.getbd(this.id);
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
</style>
